<template>
    <div>
        <p>
            <button class="btn btn-bold btn-success btn-round " >
                <i class="ace-icon fa fa-send bigger-110"></i>
                网站设置
            </button>
        </p>
        <div class="row">

            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <form class="form-horizontal" role="form" >
                    <div class="form-group" >
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 网站名称 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-1" placeholder="网站名称" v-model="resources.id" class="col-xs-10 col-sm-5" />
                            {{resources.id}}
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> 网站标题 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-2" placeholder="网站标题" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-3"> 站点关键字 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-3" placeholder="站点关键字" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-4"> 站点描述 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-4" placeholder="站点描述" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 联系人 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-5" placeholder="联系人" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-6"> 手机 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-6" placeholder="手机" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-7"> QQ </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-7" placeholder="QQ" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-8"> 电话 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-8" placeholder="电话" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-9"> 邮箱 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-9" placeholder="邮箱" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-10"> 地址 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-10" placeholder="地址" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-11"> 备案号 </label>

                        <div class="col-sm-9">
                            <input type="text" id="form-field-11" placeholder="备案号" class="col-xs-10 col-sm-5" />
                        </div>
                    </div>


                    <div >
                        <div class="col-md-offset-3 col-md-9">
                            <button class="btn btn-info" type="button">
                                <i class="ace-icon fa fa-check bigger-110"></i>
                                提交
                            </button>

                            &nbsp; &nbsp; &nbsp;
                            <button class="btn" type="reset">
                                <i class="ace-icon fa fa-undo bigger-110"></i>
                                重置
                            </button>
                        </div>
                    </div>

                </form>

            </div><!-- /.col -->

                    <!--<pagination ref="pagination" v-bind:list="list" v-bind:itemCount="8"></pagination>

                    <table id="simple-table" class="table  table-bordered table-hover">
                        <thead>
                        <tr>
                                    <th>资源ID</th>
                                    <th>资源名称</th>
                                    <th>资源页面</th>
                                    <th>资源请求</th>
                                    <th>父ID</th>
                            <th class="hidden-480">操作</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr v-for="resources in resourcess" :key="resources.index">
                                        <td>{{resources.id}}</td>
                                        <td>{{resources.name}}</td>
                                        <td>{{resources.page}}</td>
                                        <td>{{resources.request}}</td>
                                        <td>{{resources.parent}}</td>

                            <td>
                                <div class="hidden-sm hidden-xs btn-group">
                                    <button class="btn btn-xs btn-primary" v-on:click="edit(resources)">
                                        <i class="ace-icon fa fa-edit bigger-120"></i>
                                    </button>
                                    <button class="btn btn-xs btn-danger" v-on:click="del(resources.id)">
                                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                    </button>
                                </div>

                                <div class="hidden-md hidden-lg">
                                    <div class="inner pos-rel">
                                        <button class="btn btn-minier btn-primary dropdown-toggle"
                                                data-toggle="dropdown" data-position="auto">
                                            1
                                            <i class="ace-icon fa fa-cog icon-only bigger-120"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                            <li>
                                                <a href="#" class="tooltip-info" data-rel="tooltip" title="view" v-on:click="edit(resources)">
                                                    <span class="blue">
                                                        <i class="ace-icon fa fa-pencil bigger-120" ></i>
                                                    </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" class="tooltip-info" data-rel="tooltip" title="view" v-on:click="del(resources.id)">
                                                    <span class="blue">
                                                        <i class="ace-icon fa fa-trash bigger-120"></i>
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>-->

            <!--<div class="col-md-6">
                <textarea id="resources-textarea"
                          class="form-control"
                          v-model="resourcesStr"
                          name="resources"
                          rows="10"></textarea>
                <br>
                <button class="btn btn-bold btn-primary btn-round " v-on:click="save()">
                    <i class="ace-icon fa fa-save bigger-110"></i>
                    保存
                </button>&nbsp;
            </div>
            &lt;!&ndash;增加资源树显示&ndash;&gt;
            <div class="col-md-6">
                <ul id="resourcesTree" class="ztree"></ul>
            </div>-->
        </div>
        <hr>


    </div>
</template>

<script>
    //import Pagination from "../../components/pagination";
    export default {
        name: "system-message",
        //components: {Pagination},
        data: function () {
            return {
                resources: {},
                resourcess: [],
                //绑定多行文本框内容
                resourcesStr: "",
                resourcesTree: {},
            }
        },
        mounted: function () {
            let _this = this;
            //更换树型结构，取消分页后，无需指定页码
            //_this.$refs.pagination.size=10;
            //_this.list(1);
            _this.list();

        },
        methods: {
            /**
             * 列表查询：树型结构
             */
            list(page) {
                let _this = this;
                Loading.show();
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/system/admin/resources/load-resources-tree')
                    .then((responseDTO) => {
                        Loading.hide();
                        console.log("查询资源管理表列表：", responseDTO);
                        let resp = responseDTO.data;
                        _this.resourcess = resp.responseData;
                        //初始化树型结构
                        _this.initResourcesTree();
                    })
            },

            /**
             * 点击【保存】
             */
            save(page) {
                let _this = this;

                //保存校验
                if (Tool.isEmpty(_this.resourcesStr)) {
                    Toast.warning("配置资源不能为空！");
                    return;
                }
                let json = JSON.parse(_this.resourcesStr);

                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/resources/save', json)
                    .then((responseAdd) => {
                        Loading.hide();
                        console.log("保存资源管理表结果：", responseAdd);
                        let resp = responseAdd.data;
                        if (resp.success) {
                            $("#form-modal").modal('hide');
                            _this.list(1);
                            //添加提示
                            Toast.success("保存成功！");
                        } else {
                            Toast.warning(resp.responseMsg);
                        }
                    })
            },

            /**
             * 点击【删除】
             */
            del(id) {
                let _this = this;
                Confirm.show("删除资源管理表后不可恢复!", function () {
                    Loading.show();
                    _this.$ajax.delete(process.env.VUE_APP_SERVER + '/system/admin/resources/delete/' + id)
                        .then((responseDel) => {
                            Loading.hide();
                            console.log("删除资源管理表内容：", responseDel);
                            let resp = responseDel.data;
                            if (resp.success) {
                                _this.list(1);
                                Toast.success("删除成功！");
                            }
                        });
                });
            },
            /**
             * 初始化结构树
             */
            initResourcesTree(){
                let _this=this;
                let setting={
                    data:{
                        simpleData:{
                            idKey:"id",
                            pIdKey:"parent",
                            rootPId:"",
                            //enable:true
                        }
                    }
                };
                _this.zTree=$.fn.zTree.init($("#resourcesTree"),setting,_this.resourcess);
                //全部展开
                _this.zTree.expandAll(true);
            },
        }
    }
</script>

<style scoped>

</style>